<template>
  <div :class="['artist-recommend', 'clearfix', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="title">
      <div class="chinese">
        艺术家推荐
      </div>
    </div>
    <div class="artist-list">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide artist" @mouseleave="handleLeave" @mousemove="handleMove(index)" v-for="(item, index) in artistList" @click="goDesc(item.data_id)" :key="item.data_id">
            <div class="info" v-show="showInfo === index || !$ua.isFromPc()">
              <div class="name">
                {{ item.name }}
              </div>
              <div class="quantity">
                {{ item.works_total }}件作品
              </div>
            </div>
            <img :src="item.photo" fit="cover" alt="" />
          </div>
        </div>
        <div v-if="$ua.isFromPc()" class="swiper-button-prev"></div>
        <div v-if="$ua.isFromPc()" class="swiper-button-next" ref="nextBtn"></div>
      </div>
    </div>
    <div class="see-more">
      <div class="line"></div>
      <div @click="goArtist" class="text">查看更多<img src="@/static/img/home/arrow.png" alt=""></div>
    </div>
  </div>
</template>

<script>
import { Swiper as SwiperClass, Navigation, Pagination } from 'swiper'
import 'swiper/swiper-bundle.css'
export default {
 name: 'artistRecomm',
 data() {
   return {
    timer: null,
    swiper: undefined,
    showInfo: '',
    page_count: 3,
    page_num: 0,
    total_count: 0,
    artistList: [
    ],
    timer: null
   }
 },
//  async asyncData({ $api }) {
//     console.log('执行')
//     const res = await $api.getProductType({})
//     if (res.status == '$SUCCESS') {
//       this.menuTop = res.result.item_list.filter(item => item.parent_id == -1)
//       console.log(this.menuTop)
//     }
//     const response = await $api.artWorkList({}, )
//   },
watch: {
  artistList: function(newVal, oldVal) {
    this.$nextTick(() => {
      SwiperClass.use([Navigation, Pagination])
      this.swiper = new SwiperClass('.swiper-container', {
        slidesPerView: this.$ua.isFromPc() ? '3' : '2',
        // loopedSlides: 5,
        autoplay: true,
        // observer: true,
        loop: true,
        // slidesPerView: 3,
        grid: {
          fill: 'column',
          rows: 1,
        },
        // observeParents: true,
        paginationClickable: true,
        // loopAdditionalSlides: 3,
        // noSwiping: true,
        autoplay: {
          delay: 1500,
          // disableOnInteraction: false,
        },
        spaceBetween: 24,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          disabledClass: 'my-button-disabled'
        }
      })
    })
  },
  immediate: true
},
mounted() {
  this.timer = setInterval(() => {
    console.log('点击事件')
    if(this.$refs.nextBtn) {
      this.$refs.nextBtn.click()
    }
  }, 3000);
  this.artRecomment(this.page_num, this.page_count)
},
beforeDestroy() {
  clearInterval(this.timer)
},
  methods: {
    goDesc(id) {
      this.$router.push({ path: '/personal', query: { id } })
    },
    artRecomment() {
      this.$api.artList({ recommend: 1, page_num: 1, page_count: 6 }).then(res => {
        if (Array.isArray(res.result.item_list) && res.result.item_list) {
          this.artistList = res.result.item_list
          // if (this.$ua.isFromPc()) {
          //   // this.mouseleaveSwiper('+')
          // } else {
          //   this.artistList = res.result.item_list.filter(item => {
          //     return item.photo
          //   }).slice(0, 2)
          // }
        }
      })
    },
    handleMove(index) {
      clearInterval(this.timer)
      this.showInfo = index
    },
    handleLeave() {
      this.timer = setInterval(() => {
        console.log('点击事件')
        if(this.$refs.nextBtn) {
          this.$refs.nextBtn.click()
        }
      }, 3000);
      this.showInfo = ''
    },
    goArtist() {
      this.$router.push('/artist')
    }
  }
}
</script>

<style lang="less" scoped>
  .artist-recommend {
    &.z-web {
      padding: 150px 100px 100px;
      position: relative;

      .title {
        vertical-align: top;
        width: 100px;
      }

      .artist-list {
        width: 1500px;
        display: inline-block;
        margin-left: 30px;
        // position: relative;

        --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
        --swiper-navigation-color: #000;/* 单独设置按钮颜色 */
        --swiper-navigation-size: 30px;/* 设置按钮大小 */
        position: relative;

        ::v-deep(.swiper-slide) {
          width: 484px;
          height: 617px;
        }

        .swiper-button-prev, .swiper-button-next {
          width: 50px;
          height: 100px;
          background-color: #fff;
          opacity: 0.8;
        }

        ::v-deep(.swiper-button-next) {
          margin-right: 15px;
        }

        .artist {
          width: 486px;
          height: 617px;
          cursor: pointer;
          position: relative;
          display: inline-block;
          // margin-right: 27px;

          &:nth-child(3n) {
            margin-right: 0;
          }

          .info {
            width: 100%;
            position: absolute;
            bottom: 54px;
            left: 0;
            text-align: center;
            // height: 100%;
            letter-spacing: 5px;

            .name {
              font-size: 24px;
              font-weight: 600;
              color: #000;
              margin-bottom: 15px;
              // letter-spacing: 5px;
            }

            .quantity {
              font-size: 16px;
              font-weight: 800;
              color: #626262;
            }
          }

          &:hover {
            img {
              opacity: 0.5;
            }
          }

          img {
            height: 617px;
            width: 484px;
            object-fit: cover;
          }
        }
      }

      .see-more {
        margin: 104px 0 0 160px;
      }
    }

    &.z-phone {
      padding: pxtorem(120) 0;

      .title {
        vertical-align: top;
      }

      .artist-list {
        float: right;
        margin-left: pxtorem(30);
        width: pxtorem(650);

        .artist {
          width: pxtorem(288);
          height: pxtorem(384);
          cursor: pointer;
          position: relative;
          display: inline-block;
          margin-right: pxtorem(24);

          &:last-child {
            margin-right: 0;
          }

          ::v-deep(.swiper-slide) {
            width: pxtorem(288);
            height: pxtorem(384);
          }

          .info {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            // height: 100%;
            letter-spacing: 5px;
            z-index: 999;
            color: #fff;
            padding: pxtorem(10) 0;
            background-color: #626262;
            opacity: 0.5;

            .name {
              font-size: pxtorem(24);
              font-weight: 600;
              // color: #000;
              margin-bottom: pxtorem(10);
              // letter-spacing: 5px;
            }

            .quantity {
              font-size: pxtorem(16);
              font-weight: 800;
              // color: #626262;
            }
          }

          img {
            width: 100%;
            height: pxtorem(384);
            object-fit: cover;
          }
        }
      }

      .see-more {
        width: pxtorem(128);
        margin-top: pxtorem(172);
        margin-left: pxtorem(150);

        .text {
          margin-top: pxtorem(20);
          font-size: pxtorem(18);
          font-family: Source Han Serif SC;
          font-weight: 600;
          color: #000000;
        }

        img {
          width: pxtorem(40);
          margin-top: pxtorem(10);
        }
      }
    }
    // background-color: #fff;
  }
</style>